<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-add" lay-event="add">上传表单</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<div id="showViewUpload" style="display: none">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
        <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>
</div>

<div id="showViewAdd" style="display: none">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label required">表单名称</label>
            <div class="layui-input-block">
                <input type="text" name="formName" required  lay-verify="required" placeholder="请输入表单名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关联流程</label>
            <div class="layui-input-block">
                <select name="processInstanceKey" id="processInstanceKey" lay-verify="required">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveBtn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../lib/layui-v2.5.5/layui.all.js" charset="utf-8"></script>
<script src="../js/common.js"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            upload=layui.upload;

        table.render({
            elem: '#currentTableId',
            url: '/formTable/listFormTable',
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', width: 80, title: '编号', sort: true,templet:'#zizeng',align:'center',templet:function (d) {
                        return d.LAY_TABLE_INDEX+1;
                    }},
                {field: 'formName', width: 180, title: '表单名称',align:'center'},
                {field: 'processInstanceKey', width: 180, title: '流程Key', sort: true,align:'center'},
                {field: 'createTime', width: 180, title: '创建时间',align:'center',templet :function (d) {
                        return showTime(d.createTime)
                    }},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page:true,
            skin: 'line',
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */

        table.on('toolbar(currentTableFilter)', function (obj) {
            switch(obj.event){
                case 'add':
                    var addIndex=layer.open({
                        type: 1,
                        title:'添加',
                        area: ['400px', '420px'], //自定义文本域宽高
                        content: $('#showViewAdd') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    //监听提交
                    form.on('submit(saveBtn)', function (data) {
                        $.ajax({
                            type:"post",
                            dataType:"json",
                            url: webUrl+'/formTable/addFormTable',//url
                            contentType: "application/json; charset=utf-8",
                            data:JSON.stringify(data.field),
                            success: function (result) {
                                if (result.data.success == true) {
                                    layer.msg("操作成功");
                                    layer.close(addIndex);
                                    //刷新父界面(当前页的弹窗不需要加parent)
                                    window.location.reload();
                                } else {
                                    layer.msg("操作失败");
                                }
                            },
                            error: function () {
                                layer.msg("操作失败");
                            }

                        })
                        return false;
                    });
                    break;
            }
        });


        /**
         * 行工具事件
         */
        table.on('tool(currentTableFilter)', function (obj) {
            switch(obj.event){
                case 'add':
                    var index=layer.open({
                        type: 1,
                        title:'上传表单',
                        area: ['400px', '150px'], //自定义文本域宽高
                        content: $('#showViewUpload') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    //选完文件后不自动上传
                    upload.render({
                        elem: '#test8'
                        ,url: webUrl+'/formTable/upload' //改成您自己的上传接口
                        ,auto: false
                        ,method:'POST'
                        ,bindAction: '#test9'
                        ,field:'formFile'
                        ,accept:'file'
                        ,data:{
                            'id':obj.data.id
                        }
                        ,done: function(res){
                            if(res.data.success==true){
                                layer.msg('上传成功');
                                layer.close(index);
                                //刷新父界面(当前页的弹窗不需要加parent)
                                window.location.reload();
                            }else{
                                layer.msg(res.data.msg);
                            }
                        }
                    });
                    break;
                case 'setContent':
                    layer.open({
                        type: 2,
                        title:'表单内容',
                        area: ['300', '300px'], //自定义文本域宽高
                        content: 'table/applyContent.html'
                    });
                   break;
                case 'delete':
                    layer.confirm('是否删除？', {
                        btn: ['是', '否',],//可以无限个按钮
                    }, function(index, layero){
                        $.ajax({
                            type:"post",
                            dataType:"json",
                            url: webUrl+'/formTable/delete',//url
                            contentType: "application/json; charset=utf-8",
                            data:JSON.stringify({
                                'id':obj.data.id
                            }),
                            success: function (result) {
                                if (result.data.success == true) {
                                    layer.msg("操作成功");
                                    layer.close(index);
                                    //刷新父界面(当前页的弹窗不需要加parent)
                                    window.location.reload();
                                } else {
                                    layer.msg("操作失败");
                                }
                            },
                            error: function () {
                                layer.msg("操作失败");
                            }
                        })
                    });
                    break;
            }
        });


        /**
         * 关联流程
         */
        $.ajax({
            type:"post",
            dataType:"json",
            url: webUrl+'/formTable/processComboList',//url
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                if (result.data.success == true) {
                    var option='<option value=""></option>'
                    for(var i=0;result.data.rows.length>i;i++){
                        var key=result.data.rows[i].key;
                        var name=result.data.rows[i].name;
                        option+='<option value="'+key+'">'+name+'</option>';
                    }
                    $("#processInstanceKey").html(option);
                    form.render();
                } else {
                    layer.msg("操作失败");
                }
            },
            error: function () {
                layer.msg("操作失败");
            }

        })
    });

    //时间转换函数
    function showTime(tempDate)
    {
        var d = new Date(tempDate);
        var year = d.getFullYear();
        var month = d.getMonth();
        month++;
        var day = d.getDate();
        var hours = d.getHours();

        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        month = month<10 ? "0"+month:month;
        day = day<10 ? "0"+day:day;
        hours = hours<10 ? "0"+hours:hours;
        minutes = minutes<10 ? "0"+minutes:minutes;
        seconds = seconds<10 ? "0"+seconds:seconds;


        var time = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        return time;
    }
</script>

</body>
</html>